<%--
  Created by IntelliJ IDEA.
  User: 26098
  Date: 2023/12/31
  Time: 10:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="resource.jsp"%>
    <title>登入</title>
    <script>
        $(document).ready(function() {

            $("#username").focus();

            $("#btn1").click(function() {
                $("#img1").attr("src", "captcha.do?r=" + Math.random());
                return false;
            });

            $("#submitBtn").click(function(){
                let pass = true;
                let username = $("#username");
                let password = $("#password");
                let captcha = $("#captcha");
                if(username.val()!=null&&username.val().trim().length>=4&&username.val().trim().length<=20){
                    username.attr("class","form-control is-valid");
                }else{
                    pass = false;
                    username.attr("class","form-control is-invalid");
                }
                if(password.val()!=null&&password.val().trim().length>=4&&password.val().trim().length<=20){
                    password.attr("class","form-control is-valid");
                }else{
                    pass = false;
                    password.attr("class","form-control is-invalid");
                }
                if(captcha.val()!=null&&captcha.val().trim().length==4){
                    captcha.attr("class","form-control is-valid");
                }else{
                    pass = false;
                    captcha.attr("class","form-control is-invalid");
                }
                //alert(username + pass);
                return pass;
            });
        });
    </script>
</head>
<body>

<%@ include file="header.jsp"%>
<h1 align="center">用户登录</h1>
<div class="container" style="margin:24px auto;">
    <div class="row">
        <form action="user-signin.do" method="post" style="width: 640px; margin: 0 auto;">
            <div class="row my-4 g-3 align-items-center">
                <div class="col-auto">
                    <label for="username" class="col-form-label">Username</label>
                </div>
                <div class="col-auto">
                    <input type="text" id="username" name="username"
                           class="form-control">
                </div>
                <div class="col-auto">
                    <span class="form-text"> Must be 4-20 characters long. </span>
                </div>
            </div>
            <div class="row my-4 g-3 align-items-center">
                <div class="col-auto">
                    <label for="password" class="col-form-label">Password</label>
                </div>
                <div class="col-auto">
                    <input type="password" id="password" name="password"
                           class="form-control">
                </div>
                <div class="col-auto">
			<span id="passwordHelpInline" class="form-text"> Must be
				4-20 characters long. </span>
                </div>
            </div>
            <div class="row my-4 g-3 align-items-center">
                <div class="col-auto">
                    <label for="password2" class="col-form-label">Confirm
                        &nbsp;&nbsp; </label>
                </div>
                <div class="col-auto">
                    <input type="password" id="password2" name="password2"
                           class="form-control">
                </div>
                <div class="col-auto">
                    <span class="form-text"> Confirm your password. </span>
                </div>
            </div>
            <div class="row my-4 g-3 align-items-center">
                <div class="col-auto">
                    <label for="captcha" class="col-form-label">Captcha
                        &nbsp;&nbsp; </label>
                </div>
                <div class="col-auto">
                    <input type="text" id="captcha" name="captcha"
                           class="form-control">
                </div>
                <div class="col-auto">
                    <span class="form-text"> Must be 4 characters long. </span>
                </div>
            </div>
            <div class="row my-4 g-3 align-items-center">
                <div class="col-auto">
                    <button id="btn1" class="btn">
                        <img id="img1" src="captcha.do" style="width: 220px;" />
                        &nbsp;Refresh
                    </button>
                </div>
            </div>
            <button id="submitBtn" class="btn btn-primary">Submit</button>
        </form>

    </div><!-- end of row -->
</div><!-- end of container -->

</body>
</html>
